<!-- 饮食记录 -->
<template>
<div class="container_food_recoreded">
    <div class="circle_box">
        <div style="padding-bottom: 0.625rem;">今日还可以吃(千卡)</div>
        <van-circle :clockwise="false" size="120" stroke-width="100" layer-color="#ffe6d6" color="#e88e61" stroke-linecap="square" v-model="rate.number" :rate="rate.number" :text="rate.text" />
    </div>
    <!-- 食物列表 -->
    <div class="list">
        <div class="title">
            <span>早餐</span>
            <span>
                <van-icon name="fire" color="#e88e61" />已摄入{{ calBF.toFixed(1) }}千卡</span>
        </div>
        <van-swipe-cell :before-close="beforeClose" v-for="(item,index) in dataList.bf" :name="item.id + '_1'" :key="item.id">
            <div class="food_item">
                <img :src="item.imgUrl" alt="">
                <div class="food_des">
                    <div>{{item.name}}</div>
                    <div>{{item.cal}}千卡 / {{ item.unit }}{{ item.unitText }}</div>
                </div>
                <van-icon name="arrow-left" color="#ddd" size="16" />
            </div>
            <template #right>
                <van-button square type="danger" text="删除" /></template>
        </van-swipe-cell>
        <div v-show="dataList.bf.length == 0" style="text-align: center;padding-bottom:1.875rem;color: #aaa;">暂未记录早餐~</div>
    </div>
    <!-- 食物列表 -->
    <div class="list">
        <div class="title">
            <span>午餐</span>
            <span>
                <van-icon name="fire" color="#e88e61" />已摄入{{ calLU.toFixed(1) }}千卡</span>
        </div>
        <van-swipe-cell :before-close="beforeClose" v-for="(item,index) in dataList.lu" :name="item.id + '_2'" :key="item.id">
            <div class="food_item">
                <img :src="item.imgUrl" alt="">
                <div class="food_des">
                    <div>{{item.name}}</div>
                    <div>{{item.cal}}千卡 / {{ item.unit }}{{ item.unitText }}</div>
                </div>
                <van-icon name="arrow-left" color="#ddd" size="16" />
            </div>
            <template #right>
                <van-button square type="danger" text="删除" /></template>
        </van-swipe-cell>
        <div v-show="dataList.lu.length == 0" style="text-align: center;padding-bottom:1.875rem;color:#aaa;">暂未记录午餐~</div>
    </div>
    <!-- 食物列表 -->
    <div class="list">
        <div class="title">
            <span>晚餐</span>
            <span>
                <van-icon name="fire" color="#e88e61" />已摄入{{ calDI.toFixed(1) }}千卡</span>
        </div>
        <van-swipe-cell :before-close="beforeClose" v-for="(item,index) in dataList.di" :name="item.id + '_3'" :key="item.id">
            <div class="food_item">
                <img :src="item.imgUrl" alt="">
                <div class="food_des">
                    <div>{{ item.name }}</div>
                    <div>{{item.cal}}千卡 / {{ item.unit }}{{ item.unitText }}</div>
                </div>
                <van-icon name="arrow-left" color="#ddd" size="16" />
            </div>
            <template #right>
                <van-button square type="danger" text="删除" /></template>
        </van-swipe-cell>
        <div v-show="dataList.di.length == 0" style="text-align: center;padding-bottom:1.875rem;color: #aaa;">暂未记录晚餐~</div>
    </div>

    <!-- 摄入营养结构分析图 -->
    <div class="trendChart" style="padding-top: 1.875rem;" v-show="showChart">
        <div id="nutritionChart" style="width: 23.4375rem;height:18.75rem;"></div>
        <div style="font-size: 0.9375rem;text-align: center;color: #888;">
            <van-divider :style="{ color: '#c91010', borderColor: '#c91010', padding: '0 1rem' }">
                <van-icon name="fire" color="#c91010" /> 今日共摄入热量{{ calTotal }}千卡
            </van-divider>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="btn">
        <van-button plain type="default" color="#69b129" @click="goRecord('bf')">记早餐</van-button>
        <van-button plain type="default" color="#69b129" @click="goRecord('lu')">记午餐</van-button>
        <van-button plain type="default" color="#69b129" @click="goRecord('di')">记晚餐</van-button>
    </div>

</div>
</template>

<script>
import * as echarts from 'echarts';
import {
    apiRequest
} from '../../assets/js/axios_api';
import {
    dateFormat
} from '../../assets/js/utils'

export default {
    metaInfo() {
        return {
            title: '饮食记录'
        }
    },
    name: 'FoodRecoreded',
    data() {
        return {
            showChart: true, //是否显示营养占比图
            userInfo: {},
            calFoodCommand: 0, //推荐热量总和
            calTotal: 0, //今日摄入热量总和
            calBF: 0,
            calLU: 0,
            calDI: 0,
            fatTotal: 0,
            proteinTotal: 0,
            carbohydratesTotal: 0,
            pieData: [],
            dataList: {
                bf: [], //已记录早餐
                lu: [], //已记录午餐
                di: [] //已记录晚餐
            },
            rate: {
                number: 0, //顶部一摄入热量占比
                text: '' //顶部还可以吃多少千卡
            },
        }
    },
    components: {},
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.calFoodCommand = sessionStorage.getItem('calFoodCommand')
        this.getFoodRecorded()
    },
    methods: {
        // 滑动删除，点击删除
        beforeClose({
            name,
            position,
            instance
        }) {
            // position 为关闭时点击的位置，instance 为对应的 SwipeCell 实例
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    this.$dialog.confirm({
                        message: '确定删除吗？'
                    }).then(() => {
                        instance.close();
                        let deleteParam = {
                            cusId: this.userInfo.cusId,
                            foods: [{
                                id: name.split('_')[0],
                                weight: 0, //克重
                            }],
                            "planDayTime": name.split('_')[1],
                        }
                        apiRequest(this, 'hmfoodrecord', deleteParam, resData => {
                            // 删除成功，重新加载页面数据
                            this.getFoodRecorded()
                        }, 'post')
                    });
                    break;
            }
        },
        // 点击记录早午晚餐
        goRecord(name) {
            this.$router.push({
                path: '/recfood',
                query: {
                    time: name
                }
            });
        },
        // 初始化营养占比饼状图
        initEcharts() {
            let myChart = echarts.init(document.getElementById('nutritionChart'));
            let option = {
                title: {
                    text: '营养占比',
                    left: 'center',
                    top: 'center'
                },
                series: [{
                    type: 'pie',
                    data: this.pieData,
                    radius: ['30%', '60%']
                }]
            };
            setTimeout(() => {
                myChart.setOption(option);
            }, 1000);
        },
        // 变量值置空
        clearVals() {
            this.dataList = {
                bf: [],
                lu: [],
                di: []
            };
            this.calFoodCommand = sessionStorage.getItem('calFoodCommand');
            this.calTotal = 0;
            this.calBF = 0;
            this.calLU = 0;
            this.calDI = 0;
            this.fatTotal = 0;
            this.proteinTotal = 0;
            this.carbohydratesTotal = 0;
        },
        // 获取已记录数据
        getFoodRecorded() {
            this.clearVals()
            let param = {
                cusId: this.userInfo.cusId,
            }
            apiRequest(this, 'hmfoodrecord/page', param, resData => {
                resData.list.forEach(element => {
                    if (element.planDayTime == '1') {
                        element.foods.forEach(obj => {
                            this.dataList.bf.push({
                                id: obj.id,
                                name: obj.foodName,
                                unit: obj.weight,
                                cal: obj.foodTrophy,
                                imgUrl: obj.foodIconUrl,
                                unitText: 'g'
                            })
                            this.calBF += obj.foodTrophy;
                            this.calTotal += obj.foodTrophy;
                            this.fatTotal += obj.fat;
                            this.proteinTotal += obj.protein;
                            this.carbohydratesTotal += obj.carbohydrates;
                        });
                    } else if (element.planDayTime == '2') {
                        element.foods.forEach(obj => {
                            this.dataList.lu.push({
                                id: obj.id,
                                name: obj.foodName,
                                unit: obj.weight,
                                cal: obj.foodTrophy,
                                imgUrl: obj.foodIconUrl,
                                unitText: 'g'
                            })
                            this.calLU += obj.foodTrophy;
                            this.calTotal += obj.foodTrophy;
                            this.fatTotal += obj.fat;
                            this.proteinTotal += obj.protein;
                            this.carbohydratesTotal += obj.carbohydrates;
                        })
                    } else {
                        element.foods.forEach(obj => {
                            this.dataList.di.push({
                                id: obj.id,
                                name: obj.foodName,
                                unit: obj.weight,
                                cal: obj.foodTrophy,
                                imgUrl: obj.foodIconUrl,
                                unitText: 'g'
                            })
                            this.calDI += obj.foodTrophy;
                            this.calTotal += obj.foodTrophy;
                            this.fatTotal += obj.fat;
                            this.proteinTotal += obj.protein;
                            this.carbohydratesTotal += obj.carbohydrates;
                        })
                    }
                });
                this.calTotal = Math.round(this.calTotal * 100) / 100;
                this.rate.number = this.calTotal / this.calFoodCommand * 100;
                this.rate.text = this.calFoodCommand - this.calTotal > 0 ? (this.calFoodCommand - this.calTotal) + '' : '0';
                this.showChart = this.dataList.bf.length > 0 || this.dataList.lu.length > 0 || this.dataList.di.length > 0;
                let elemSum = this.fatTotal + this.proteinTotal + this.carbohydratesTotal;
                this.pieData = [{
                        value: this.carbohydratesTotal,
                        name: '碳水 ' + parseInt(this.carbohydratesTotal / elemSum * 100) + '%'
                    },
                    {
                        value: this.fatTotal,
                        name: '蛋白质 ' + parseInt(this.fatTotal / elemSum * 100) + '%'
                    },
                    {
                        value: this.proteinTotal,
                        name: '脂肪 ' + parseInt(this.proteinTotal / elemSum * 100) + '%'
                    }
                ]
                this.initEcharts();
            }, 'get')

        },

    }
}
</script>

<style lang="less">
@import '../../assets/css/common.less';

.container_food_recoreded {
    background-color: #fff;
    padding-bottom: 7.5rem;

    .circle_box {
        margin: 1.25rem;
        text-align: center;

        .van-circle__text {
            font-weight: bold;
            font-size: 1.5rem;
        }
    }

    .list {
        .title {
            font-size: 0.8125rem;
            color: #666;
            display: flex;
            justify-content: space-between;
            padding: 0.625rem 1.125rem;
        }

        .food_item {
            background-color: #fff;
            padding: 0.875rem;
            margin: 0.625rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0.0625rem -0.0625rem 0.25rem 0.0625rem rgba(158, 212, 145, 0.3);
            display: flex;
            justify-content: space-between;

            img {
                width: 2.5rem;
                height: 2.5rem;
            }

            .food_des {
                flex-grow: 2;
                text-align: left;
                font-weight: bold;

                div {
                    padding: 0.125rem 1.25rem;
                }
            }

            .van-icon-arrow-left {
                line-height: 2.5rem;
            }

        }

        .van-button--danger {
            height: 4.25rem;
        }
    }

    .btn {
        position: fixed;
        bottom: 3.125rem;
        left: 1rem;
        right: 1rem;
        border-radius: 2.5rem;
        display: flex;
        justify-content: space-around;
        opacity: 0.9;

        button {
            flex-grow: 1;
        }
    }

}
</style>
